<template>
    <view class="container">
        <view class="head">
            <!-- <tag tag-class="tag" /></tag> -->
            <like
                class="like"
                like="true"
                count="classic.fav_nums"
            /></like>
        </view>
        <!-- <image
            class="{{classic.type==200?'music-img':'other-img'}}"
            :src="classic.image"
        ></image> -->
        <view class="text">{{ classic.content }}</view>
    </view>
</template>

<script>
import tag from "@/components/tag/tag.vue";
import like from "@/components/like/like.vue";

export default {
    components: {
        tag,
        like
    },
    name: "preview",
    data () {
        return {

        };
    },
    props: {
     classic: {
		 type: Object,
		 observer(newVal){
           if(newVal){
			   const typeText = {
				   100: "电影",
				   200: "音乐",
				   300: "句子"
			   }[newVal.type]
		   }
		 }
	 }
    },
}
</script>

<style lang='scss' scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 330rpx;
    background-color: #ffffff;
}

.head {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
}

.tag {
    margin-left: 20rpx;
    margin-top: -2rpx;
    height: 40rpx;
    width: 72rpx;
    font-size: 24rpx;
    background-color: #f7f7f7 !important;
}

.like {
    margin-top: 4rpx;
    margin-right: 4rpx;
}

.other-img {
    width: 100%;
    height: 240rpx;
}

.music-img {
    border-radius: 50%;
    width: 240rpx;
    height: 240rpx;
}

.text {
    padding: 30rpx;
    font-size: 28rpx;
    height: 130rpx;
    color: #666666;
    overflow: hidden;
}
</style>
